<template >
    <a-row type="space-around" justify="left" align="middle">
        <a-col :xs="{ span: 2, offset: 3 }" :sm="{ span: 2, offset: 3 }" :md="{ span: 2, offset: 3 }"
            :lg="{ span: 2, offset: 3 }" :xl="{ span: 2, offset: 3 }">
            <div class="author_avatar">
                <a-avatar shape="circle" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            </div>
            <!-- :src="authorUrl" -->
        </a-col>
        <a-col :xs="{ span: 10 }" :sm="{ span: 10 }" :md="{ span: 10 }" :lg="{ span: 10 }" :xl="{ span: 10 }">
            <a-row>
                <a-col>
                    <div class="author_name" style="font-size:2em;color:#ffffff; margin-left: 2vh;margin-top: 3.5vh;">{{
                        authorName }}
                    </div>
                </a-col>
                <a-col>
                    <div v-if="interest" style="margin-top: 4vh;margin-left: 3vh;">
                        <a-button type="primary" shape="round" :loading="buttonLoading"
                            style="background-color: #3fa4fc;border-color: #3fa4fc;font-size:1em;"
                            @click.prevent="handleChange">
                            <icon-font type="icon-yiguanzhu">
                            </icon-font>已关注</a-button>
                    </div>
                    <div v-else style="margin-top: 4vh;margin-left: 3vh">
                        <a-button type="primary" shape="round" :loading="buttonLoading"
                            style="background-color: #ff932f;border-color: #ff932f;font-size:1em;"
                            @click.prevent="handleChange">
                            <icon-font type="icon-guanzhu">
                            </icon-font>关注</a-button>
                    </div>
                </a-col>

            </a-row>
            <a-row>
                <a-col :xs="{ span: 10 }" :sm="{ span: 10 }" :md="{ span: 10 }" :lg="{ span: 10 }" :xl="{ span: 10 }">
                    <div style="margin-top: 2.5vh;">
                        <div style="display: inline-block;">
                            <icon-font type="icon-edu"></icon-font>
                            <span>{{ '\xa0\xa0' + "专家学者" }}</span>
                            <!-- authorIdentity -->
                        </div>
                        <div style="display: inline-block;margin-left: 4vh;">
                            <icon-font type="icon-quyuruqin"></icon-font>
                            <span>{{ '\xa0\xa0' + "中国" }}</span>
                            <!-- authorNationality -->
                        </div>
                        <div style="display: inline-block;margin-left: 4vh;">
                            <icon-font type="icon-20xingbie"></icon-font>
                            <span>{{ '\xa0\xa0' + '男' }}</span>
                            <!-- authorGender -->
                        </div>
                    </div>
                </a-col>
            </a-row>
        </a-col>
    </a-row>
    <a-row>
        <a-col :xs="{ span: 15, offset: 1 }" :sm="{ span: 15, offset: 1 }" :md="{ span: 15, offset: 1 }"
            :lg="{ span: 15, offset: 1 }" :xl="{ span: 15, offset: 1 }">
            <a-row>
                <a-col :xs="{ span: 4 }" :sm="{ span: 4 }" :md="{ span: 4 }" :lg="{ span: 4 }" :xl="{ span: 4 }">
                    <div style="margin-top: 2vh;margin-left: 4vh;font-weight: bold;font-size: large;">
                        <a-typography-text style="color: #171d56;">标题</a-typography-text>
                    </div>
                </a-col>
                <a-col :xs="{ span: 3, offset: 12 }" :sm="{ span: 3, offset: 12 }" :md="{ span: 3, offset: 12 }"
                    :lg="{ span: 3, offset: 12 }" :xl="{ span: 3, offset: 12 }">
                    <div style="margin-top: 2vh;margin-left: 5vh;font-weight: bold;font-size: large;">
                        <a-typography-text style="color: #171d56;">发表年份</a-typography-text>
                    </div>
                </a-col>
                <a-col :xs="{ span: 4 }" :sm="{ span: 4 }" :md="{ span: 4 }" :lg="{ span: 4 }" :xl="{ span: 4 }">
                    <div style="margin-top: 2vh;margin-left: 8vh;font-weight: bold;font-size: large;">
                        <a-typography-text style="color: #171d56;">引用次数</a-typography-text>
                    </div>
                </a-col>
            </a-row>
            <a-row>
                <div class="timeLine">
                    <a-timeline>
                        <a-timeline-item v-for="item in paperList">
                            <a-row>
                            <a-col :xs="{ span: 15 }" :sm="{ span: 15 }" :md="{ span: 15 }" :lg="{ span: 15 }" :xl="{ span: 15 }">
                            <div style="display: inline-block;">
                                <a-card
                                    style=' border-radius: 1vh;background-color: rgb(247, 249, 252);margin-left: 2vh;'>
                                    <a-card-meta>
                                        <template #description>
                                            <ul class="ul_list">
                                                <div>
                                                    <a-typography-text style="font-size: 1.3em" strong>{{ item.title
                                                    }}</a-typography-text>
                                                </div>
                                                <li ref="descRef">
                                                    <ListItem :listData="item.paper_abstract">
                                                    </ListItem>
                                                </li>
                                            </ul>
                                            <div>
                                                <div style="display: inline-block;">
                                                    <a-tag v-for="category in item.categories" :key="category"
                                                        color="rgb(224, 242, 255)"
                                                        style="color: blue;border-radius: 10px;">{{
                                                            category }}</a-tag>
                                                </div>
                                                <div style="display: inline-block;margin-left: 2vh;">
                                                    <a-tag color="rgb(255, 237, 221)"
                                                        style="color: rgb(205, 130, 20);border-radius: 10px;"
                                                        @click="showDrawer(item.paper_id)">{{
                                                            item.version
                                                        }}</a-tag>
                                                </div>
                                            </div>
                                        </template>
                                    </a-card-meta>
                                </a-card>
                            </div>
                        </a-col>
                        <a-col :xs="{ span: 2, offset:2}" :sm="{ span: 2, offset:2}" :md="{ span: 2, offset:2}" :lg="{ span: 2, offset:2}" :xl="{ span: 2, offset:2}">
                            <div
                                style="display: inline-block;vertical-align: top;font-size:1.5em;color:rgb(50, 102, 254);font-weight: bold; ">
                                {{ item.update_date.slice(0, 4) }}</div>
                        </a-col>
                            <a-col :xs="{ span: 4 ,offset:1}" :sm="{ span: 4,offset:1 }" :md="{ span: 4 ,offset:1}" :lg="{ span: 4,offset:1 }" :xl="{ span: 4 ,offset:1}">
                            <div
                                style="display: inline-block;vertical-align: top;font-size:1.5em;color:#a31be8;font-weight: bold; ">
                                {{ NumFormat(48595622) }}</div>
                            </a-col>
                            <!-- NumFormat(item.cite_times) -->
                        </a-row>
                        </a-timeline-item>
                    </a-timeline>
                </div>
            </a-row>
        </a-col>
        <a-col :xs="{ span: 1 }" :sm="{ span: 1 }" :md="{ span: 1 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
            <a-divider type="vertical"></a-divider>
        </a-col>
        <a-col :xs="{ span: 6 }" :sm="{ span: 6 }" :md="{ span: 6 }" :lg="{ span: 6 }" :xl="{ span: 6 }">
            <a-row>
                <div style="margin-top: 2vh;font-weight: bold;font-size: large;">
                    <a-typography-text style="color: #171d56;">合著作者</a-typography-text>
                </div>
            </a-row>
            <a-row>
                <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }">
                    <div class="cooperate_author">
                        <a-card hoverable :bordered="true" v-for="item in authorList">
                            <a-row>
                                <a-col>
                                    <div style="display: inline-block;">
                                        <a-avatar shape="circle"
                                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                        <!-- :src="item.url" -->
                                    </div>
                                </a-col>
                                <a-col :xs="{ offset: 2 }" :sm="{ offset: 2 }" :md="{ offset: 2 }" :lg="{ offset: 2 }"
                                    :xl="{ offset: 2 }">
                                    <a-card-meta :title="item.author_name">
                                    </a-card-meta>
                                    <div style="margin-top: 0.5vh;color:rgb(66, 122, 255)" slot="description"><icon-font
                                            type="icon-weizhi"></icon-font> {{
                                                "中国" }}</div>
                                    <!-- item.author_nationality -->
                                </a-col>
                            </a-row>
                        </a-card>
                    </div>
                </a-col>
            </a-row>
            <a-row>
                <div style="margin-top: 2vh;font-weight: bold;font-size: large;">
                    <a-typography-text style="color: #171d56;">引用信息</a-typography-text>
                </div>
            </a-row>
            <a-row>
                <div style="margin-top: 1.5vh;margin-left: 19vh;font-size:small;">
                    <a-typography-text style="color: #171d56;">{{ "总计" + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + "2018年至今"
                    }}</a-typography-text>
                </div>
            </a-row>
            <a-row>
                <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }">
                    <div class="yinyongxinxi">
                        <a-card hoverable :bordered="true">
                            <a-row>
                                <a-col :xs="{ span: 5 }" :sm="{ span: 5 }" :md="{ span: 5 }" :lg="{ span: 5 }"
                                    :xl="{ span: 5 }">
                                    <div style="text-align: right;"><a-typography-text
                                            style="color: rgb(97, 107, 134);font-weight: bold;">{{ "引用"
                                            }}</a-typography-text>
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;font-weight: bold;color: rgb(85, 200, 0);text-align: right;">
                                        <icon-font type="icon-dian"></icon-font>
                                        <a-typography-text style="color: rgb(97, 107, 134);">h指数</a-typography-text>
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;color:rgb(24, 174, 250);font-weight: bold;text-align: right;">
                                        <icon-font type="icon-dian"></icon-font>
                                        <a-typography-text style="color: rgb(97, 107, 134);">i指数</a-typography-text>
                                    </div>
                                </a-col>
                                <a-col span="11">
                                    <div style="text-align: right;"><a-typography-text
                                            style="color: rgb(97, 107, 134);font-weight: bold;">{{
                                                citeInfo.cite_num }}</a-typography-text>
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;font-weight: bold;text-align: right;color: rgb(97, 107, 134);">
                                        {{ citeInfo.h_index }}
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;font-weight: bold;text-align: right;color: rgb(97, 107, 134);">
                                        {{ citeInfo.i_index }}
                                    </div>
                                </a-col>
                                <a-col span="8">
                                    <div style="text-align: right;color: rgb(97, 107, 134);font-weight: bold;">
                                        {{ citeInfo.recent_cite_num }}
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;font-weight: bold;text-align: right;color: rgb(97, 107, 134);">
                                        {{ citeInfo.recent_h_index }}
                                    </div>
                                    <div
                                        style="margin-top: 0.5vh;font-weight: bold;text-align: right;color: rgb(97, 107, 134);">
                                        {{ citeInfo.recent_i_index }}
                                    </div>
                                </a-col>
                            </a-row>
                        </a-card>
                    </div>
                </a-col>
            </a-row>
            <a-row>
                <a-col :xs="{ span: 20 }" :sm="{ span: 20 }" :md="{ span: 20 }" :lg="{ span: 20 }" :xl="{ span: 20 }">
                    <div style="margin-top: 5vh;">
                        <div ref="chartContainer"></div>
                    </div>
                </a-col>
            </a-row>
        </a-col>
    </a-row>
</template>


<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
import { divide } from 'lodash-es'
import { icon_url } from '@/util/iconfont'
import { author_info } from '@/api/post/author_info'
import { interest } from '@/api/post/interest'
import dom_map from '@/constant/dom_map'
import ListItem from '@/components/card_components/ListItem'
import globalVariable from '@/components/mathJax/globalVariable'
import '@vuepic/vue-datepicker/dist/main.css'
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import { Column } from '@antv/g2plot';


const IconFont = createFromIconfontCN({
    scriptUrl: icon_url
});//图标的使用

export default defineComponent({
    components: {
        IconFont,
        ListItem,
        divide
    },

    setup() {
        const state = reactive({
            author_id: '',                     //作者id
            //authorUrl:'',                     //作者头像链接
            authorName: '',                  //作者姓名
            // authorIdentity: '',              //作者职业 
            // authorNationality: '',           作者国籍
            // authorGender: '',                //作者性别
            loading: false,                 // 加载状态
            paperList: [],                  // 论文列表
            authorList: [],                 // 合著作者列表
            citeInfo: [],                    //引用信息
            indexInfo: [],                   //图表中要展示的指数信息
            interest: false                    //是否关注作者
        })

        const route = useRoute()
        const router = useRouter()
        const chartContainer = ref(null);//图标信息

        onMounted(() => {
            state.author_id = parseInt(route.query.author_id)
            init()
        })

        //获得作者的id
        onBeforeRouteUpdate(to => {
            state.author_id = to.query.author_id
        })

        async function init() {
            // 调用搜索接口
            await author_info(state.author_id).then(async (response) => {
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.authorName = response.data.data.author.author_name
                    state.authorUrl = response.data.data.author.url
                    // state.authorIdentity=response.data.data.author.author_identity
                    // state.authorNationality=response.data.data.author.author_nationality
                    // state.authorGender=response.data.data.author.author_gender
                    state.paperList = response.data.data.paperList
                    state.authorList = response.data.data.authorList
                    state.citeInfo = response.data.data.citeInfo
                    state.indexInfo = response.data.data.indexInfo
                    state.interest = response.data.data.interest
                }
            })
            console.log("应该先发生")
            await checkLaTex()
            chartRender()
        }

        const checkLaTex = () => {
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
        }

        //更改关注
        const handleChange = () => {
            interest(!state.interest, state.author_id).then((response) => {
                if (response.data.status.code === 0) {
                    state.interest = !state.interest
                }
            })



        }


        //图表渲染
        const chartRender = () => {
            let chartInstance = null;
            chartInstance = new Column(chartContainer.value, {
                data: state.indexInfo,
                xField: 'year',
                yField: 'value',
                color: 'rgb(85, 200, 0)',
                columnWidthRatio: 0.3,
                height: 200,
            });
            chartInstance.render();
        }


        const NumFormat = (value) => {
            if (!value) return 0
            value = value.toFixed(2)
            var intPart = Math.trunc(value)// 获取整数部分
            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            return intPartFormat
        }



        return {
            ListItem,
            ...toRefs(state),
            chartRender,
            NumFormat,
            init,
            handleChange,
            chartContainer,
            dom_map,
            route,
            router
        };
    },
});
</script>

<style scoped lang="scss">
.ul_list {
    margin: 0;
    padding: 0;

    li {
        list-style: none;
        border-radius: 8px;
        display: flex;
        overflow: hidden;
    }
}

//作者头像
.author_avatar {
    .ant-avatar {
        width: 14vh;
        height: 14vh;
        background-color: #ffffff;
        border-width: 0.5vh;
        border-color: #e9f3f9;
        border-style: solid;
        margin-top: 3.5vh;
    }
}


.timeLine {
    margin-top: 2vh;
    margin-left: 4vh;

    .ant-card {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.55;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        background: #fafdff;
        border-radius: 5px;
    }
}

.cooperate_author {

    .ant-card {
        margin-top: 2.5vh;
        width: 80%;
        background: #fafdff;
        border-radius: 10px;
    }

}

.yinyongxinxi {
    .ant-card {
        margin-top: 0.5vh;
        width: 80%;
        background: #fafdff;
        border-radius: 10px;
        line-height: 1.55;
    }


}



:deep(.ant-timeline-item-head) {
    position: absolute;
    width: 3vh;
    height: 3vh;
    background-color: rgb(84, 48, 169);
    border: 8px solid transparent;
    border-color: #ffffff;
    border-radius: 100%;
    box-shadow: 0 0 5px rgb(179, 177, 177);
}

:deep(.ant-timeline-item-tail) {
    top: 1.2vh;
    left: 1.5vh;
}

:deep(.ant-divider-vertical) {
    top: 3em;
    height: 90%;
}
</style>



